<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../CSS/geshou.css">
    <script src="../Vuejs文件/vue.js"></script>
    <script src="../axios-master/dist/axios.min.js"></script>
</head>

<body>
    <div id="div0">
        <div id="div1"></div>
        <div id="div2" class="div2">
            <br><br>
            <h3>推荐</h3>
            <ul>
                <li><a href="#" @click="get(-1,-1,-1,$event)">推荐歌手</a></li>
            </ul>
            <h3>华语</h3>
            <ul>
                <li><a href="#" @click="get(-1,1,7,$event)">华语男歌手</a></li>
                <li><a href="#" @click="get(-1,2,7,$event)">华语女歌手</a></li>
                <li><a href="#" @click="get(-1,3,7,$event)">华语组合/乐队</a></li>
            </ul>
            <h3>欧美</h3>
            <ul>
                <li><a href="#" @click="get(-1,1,96,$event)">欧美男歌手</a></li>
                <li><a href="#" @click="get(-1,2,96,$event)">欧美女歌手</a></li>
                <li><a href="#" @click="get(-1,3,96,$event)">欧美组合/乐队</a></li>
            </ul>
            <h3>日本</h3>
            <ul>
                <li><a href="#" @click="get(-1,1,8,$event)">日本男歌手</a></li>
                <li><a href="#" @click="get(-1,2,8,$event)">日本女歌手</a></li>
                <li><a href="#" @click="get(-1,3,8,$event)">日本组合/乐队</a></li>
            </ul>
            <h3>韩国</h3>
            <ul>
                <li><a href="#" @click="get(-1,1,16,$event)">韩国男歌手</a></li>
                <li><a href="#" @click="get(-1,2,16,$event)">韩国女歌手</a></li>
                <li><a href="#" @click="get(-1,3,16,$event)">韩国组合/乐队</a></li>
            </ul>
            <h3>其他</h3>
            <ul>
                <li><a href="#" @click="get(-1,1,0,$event)">其他男歌手</a></li>
                <li><a href="#" @click="get(-1,2,0,$event)">其他女歌手</a></li>
                <li><a href="#" @click="get(-1,3,0,$event)">其他组合/乐队</a></li>
            </ul>
        </div>
        <div id="div3">
            <br><br>
            <h1>
                {{message}}
            </h1>
            <div id="divLable" v-show="isShowLabel">
                <input v-for="item in charList" type="button" v-bind:value="item.num"
                    @click="get(item.num,nowArtistList.type,nowArtistList.area,-1)"
                    v-bind:class="{Active:item.isActive}">
            </div>
            <ul id="ul1">
                <li v-for="(item,index) in artistsPart" v-bind:class="{clearFloat:index%5==0}">
                    <a href="songerSingle.html" @click="fun(item.id,item.picUrl,item.name)">
                        <img v-bind:src="item.picUrl" alt="">
                        <br>
                        <span @mouseover="showOmissions(item,$event)">
                            {{item.name}}
                        </span>
                    </a>
                </li>
            </ul>
            <ul id="ul2">
                <li v-for="item in artists">
                    <a href="songerSingle.html" @click="fun(item.id);">
                        <span @mouseover="showOmissions(item,$event)">
                            {{item.name}}
                        </span>
                    </a>
                </li>
            </ul>
        </div>
        <div id="div4"></div>
    </div>
    <script>
        var app = new Vue({
            el: "#div0",
            data: {
                artistsPart: [{
                    name: "",
                    picUrl: "",
                    id: "",
                    isOmit: "",
                    omission: "",
                }],
                artists: [{
                    name: "",
                    picUrl: "",
                    id: "",
                    isOmit: "",
                    omission: "",
                }],
                isShowLabel: false,
                message: "",
                charList: [{
                    num: "",
                    isActive: false,
                }],
                nowArtistList: {
                    type: "",
                    area: "",
                }
            },
            methods: {
                get: function (initial, type, area, e) {
                    // 接口地址：https://autumnfish.cn/artist/list
                    // 例子：/artist/list?type=1&area=96&initial=b   /artist/list?type=2&area=2&initial=b
                    // 参数：
                    //     type 取值:
                    //         -1:全部
                    //         1:男歌手
                    //         2:女歌手
                    //         3:乐队
                    //     area 取值:

                    //     -1:全部
                    //     7华语
                    //     96欧美
                    //     8:日本
                    //     16韩国
                    //     0:其他
                    //     initial: 按首字母索引查找参数
                    //     -1热门
                    //     0其他
                    var that = this;
                    that.nowArtistList.type = type;
                    that.nowArtistList.area = area;
                    for (var i = 0; i < that.charList.length; i++) {
                        that.charList[i].isActive = false;
                    }
                    if (initial == "热门") {
                        initial = -1;
                    } else {
                        if (initial == "其他") {
                            initial = 0;
                        }
                    }
                    if (e == 0) {
                        that.message = "推荐歌手";
                    } else {
                        if (e != -1) {
                            that.message = e.target.innerText;
                        }
                    }
                    if (initial == -1 && type == -1 && area == -1) {
                        that.isShowLabel = false;
                    } else {
                        that.isShowLabel = true;
                        if (initial == -1) {
                            that.charList[0].isActive = true;
                        } else {
                            if (initial == 0) {
                                that.charList[27].isActive = true;
                            } else {
                                that.charList[initial.charCodeAt(0) - 64].isActive = true;
                            }
                        }
                    }
                    axios.get(
                        "https://autumnfish.cn/artist/list?limit=100&initial=" + initial + "&type=" + type + "&area=" + area
                    ).then(function (response) {
                        console.log(response.data);
                        that.artists = response.data.artists;
                        that.changeNameLength();
                        that.artistsPart = that.artists.slice(0, 10);
                        for (var i = 0; i < that.artistsPart.length; i++) {
                            that.artistsPart[i].picUrl = that.artistsPart[i].picUrl + "?param=140y140";
                        }
                        that.artists = that.artists.slice(10, 100);
                    }, function (err) { })
                },
                showOmissions: function (item, e) {
                    if (item.isOmit) {
                        e.target.setAttribute("title", item.omission);
                    }
                },
                changeNameLength: function () {
                    for (var i = 0; i < this.artists.length; i++) {
                        if (this.artists[i].name.length > 15) {
                            this.artists[i].omission = this.artists[i].name;
                            this.artists[i].name = this.artists[i].name.substring(0, 15) + "...";
                            this.artists[i].isOmit = true;
                        } else {
                            this.artists[i].isOmit = false;
                        }
                    }
                },
                getCharList: function () {
                    this.charList.push({ num: "热门" });
                    for (var i = 65; i < 91; i++) {
                        this.charList.push({ num: String.fromCharCode(i), isActive: false });
                    }
                    this.charList.push({ num: "其他", isActive: false });
                    this.charList.shift();
                },
                fun: function (id) {
                    // window.parent.songerId=id;
                    // window.parent.songerImg=img;
                    sessionStorage.setItem("songerId", id);
                },
            }
        });
        //初始化页面
        app.get(-1, -1, -1, 0);
        app.getCharList();
    </script>
</body>

</html>